<template>
  <!-- 快捷键提示面板 -->
  <transition name="shortcuts-panel">
    <div v-show="showShortcutsPanel" class="shortcuts-panel-overlay" @click.self="$emit('close')">
      <div class="shortcuts-panel">
        <div class="panel-header">
          <h3>
            <i class="fas fa-keyboard" />
            快捷键指南
          </h3>
          <button class="close-btn" @click="$emit('close')">
            <i class="fas fa-times" />
          </button>
        </div>

        <div class="shortcuts-content">
          <!-- 编辑操作 -->
          <div class="shortcuts-group">
            <h4>
              <i class="fas fa-edit" />
              编辑操作
            </h4>
            <div class="shortcut-list">
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>S</kbd>
                </div>
                <span class="shortcut-desc">保存文档</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>Z</kbd>
                </div>
                <span class="shortcut-desc">撤销</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>Y</kbd>
                </div>
                <span class="shortcut-desc">重做</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>F</kbd>
                </div>
                <span class="shortcut-desc">查找替换</span>
              </div>
            </div>
          </div>

          <!-- 格式化 -->
          <div class="shortcuts-group">
            <h4>
              <i class="fas fa-text-height" />
              格式化
            </h4>
            <div class="shortcut-list">
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>B</kbd>
                </div>
                <span class="shortcut-desc">加粗</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>I</kbd>
                </div>
                <span class="shortcut-desc">斜体</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>U</kbd>
                </div>
                <span class="shortcut-desc">下划线</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>K</kbd>
                </div>
                <span class="shortcut-desc">插入链接</span>
              </div>
            </div>
          </div>

          <!-- 视图操作 -->
          <div class="shortcuts-group">
            <h4>
              <i class="fas fa-eye" />
              视图操作
            </h4>
            <div class="shortcut-list">
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>F11</kbd>
                </div>
                <span class="shortcut-desc">全屏模式</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>F</kbd>
                </div>
                <span class="shortcut-desc">专注模式</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>E</kbd>
                </div>
                <span class="shortcut-desc">切换编辑器</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>\\</kbd>
                </div>
                <span class="shortcut-desc">显示/隐藏侧边栏</span>
              </div>
            </div>
          </div>

          <!-- 导航操作 -->
          <div class="shortcuts-group">
            <h4>
              <i class="fas fa-arrows-alt" />
              导航操作
            </h4>
            <div class="shortcut-list">
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>G</kbd>
                </div>
                <span class="shortcut-desc">跳转到行</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>P</kbd>
                </div>
                <span class="shortcut-desc">快速打开文件</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>1</kbd>
                  <span>~</span>
                  <kbd>9</kbd>
                </div>
                <span class="shortcut-desc">切换到第1~9个标签</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>Tab</kbd>
                </div>
                <span class="shortcut-desc">切换标签</span>
              </div>
            </div>
          </div>

          <!-- Markdown 专用 -->
          <div class="shortcuts-group">
            <h4>
              <i class="fab fa-markdown" />
              Markdown 专用
            </h4>
            <div class="shortcut-list">
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>1</kbd>
                  <span>~</span>
                  <kbd>6</kbd>
                </div>
                <span class="shortcut-desc">标题 1~6 级</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>L</kbd>
                </div>
                <span class="shortcut-desc">无序列表</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>O</kbd>
                </div>
                <span class="shortcut-desc">有序列表</span>
              </div>
              <div class="shortcut-item">
                <div class="shortcut-keys">
                  <kbd>Ctrl</kbd>
                  <span>+</span>
                  <kbd>Shift</kbd>
                  <span>+</span>
                  <kbd>C</kbd>
                </div>
                <span class="shortcut-desc">插入代码块</span>
              </div>
            </div>
          </div>
        </div>

        <div class="panel-footer">
          <div class="tip-text">
            <i class="fas fa-lightbulb" />
            提示：按
            <kbd>Esc</kbd>
            键可以快速关闭此面板
          </div>
          <el-button type="primary" @click="$emit('close')">
            <i class="fas fa-check" />
            知道了
          </el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
// Props
interface Props {
  showShortcutsPanel: boolean;
}

defineProps<Props>();

// Emits
const emit = defineEmits<{
  (e: 'close'): void;
}>();
</script>

<style lang="scss" scoped>
// 快捷键面板动画
.shortcuts-panel-enter-active,
.shortcuts-panel-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shortcuts-panel-enter-from {
  opacity: 0;
}

.shortcuts-panel-enter-from .shortcuts-panel {
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
}

.shortcuts-panel-leave-to {
  opacity: 0;
}

.shortcuts-panel-leave-to .shortcuts-panel {
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
}

// 快捷键面板覆盖层
.shortcuts-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  .shortcuts-panel {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(1) translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    .panel-header {
      padding: 24px 32px;
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;

      h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #202124;
        display: flex;
        align-items: center;
        gap: 12px;

        i {
          color: #1967d2;
          font-size: 18px;
        }
      }

      .close-btn {
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #5f6368;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(0, 0, 0, 0.05);
          color: #202124;
        }

        i {
          font-size: 16px;
        }
      }
    }

    .shortcuts-content {
      flex: 1;
      overflow-y: auto;
      padding: 32px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 32px;

      .shortcuts-group {
        h4 {
          margin: 0 0 16px 0;
          font-size: 16px;
          font-weight: 600;
          color: #202124;
          display: flex;
          align-items: center;
          gap: 10px;
          padding-bottom: 8px;
          border-bottom: 2px solid #1967d2;

          i {
            color: #1967d2;
            font-size: 14px;
          }
        }

        .shortcut-list {
          .shortcut-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;

            &:last-child {
              border-bottom: none;
              padding-bottom: 0;
            }

            &:hover {
              background: rgba(25, 103, 210, 0.05);
              margin: 0 -8px;
              padding: 12px 8px;
              border-radius: 8px;
            }

            .shortcut-keys {
              display: flex;
              align-items: center;
              gap: 6px;
              font-family:
                'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
                monospace;

              kbd {
                background: white;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 6px;
                padding: 4px 8px;
                font-size: 11px;
                font-weight: 600;
                color: #202124;
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
                display: inline-block;
                min-width: 20px;
                text-align: center;
              }

              span {
                color: #5f6368;
                font-size: 10px;
                font-weight: 500;
                margin: 0 2px;
              }
            }

            .shortcut-desc {
              font-size: 13px;
              color: #5f6368;
              font-weight: 500;
            }
          }
        }
      }
    }

    .panel-footer {
      padding: 20px 32px;
      background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tip-text {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #5f6368;

        i {
          color: #fbbc04;
          font-size: 14px;
        }

        kbd {
          background: rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          padding: 2px 6px;
          font-size: 11px;
          font-family: 'SF Mono', Monaco, monospace;
          color: #202124;
          margin: 0 2px;
        }
      }

      :deep(.el-button) {
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 500;

        i {
          margin-right: 6px;
        }
      }
    }
  }
}

// 滚动条样式
:deep(.shortcuts-content)::-webkit-scrollbar {
  width: 8px;
}

:deep(.shortcuts-content)::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

:deep(.shortcuts-content)::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: background 0.2s ease;
}

:deep(.shortcuts-content)::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

// 响应式设计
@media (max-width: 768px) {
  .shortcuts-panel-overlay {
    padding: 16px;

    .shortcuts-panel {
      .panel-header {
        padding: 20px 24px;

        h3 {
          font-size: 18px;

          i {
            font-size: 16px;
          }
        }

        .close-btn {
          width: 32px;
          height: 32px;

          i {
            font-size: 14px;
          }
        }
      }

      .shortcuts-content {
        padding: 24px;
        grid-template-columns: 1fr;
        gap: 24px;

        .shortcuts-group {
          h4 {
            font-size: 14px;

            i {
              font-size: 12px;
            }
          }

          .shortcut-list {
            .shortcut-item {
              padding: 10px 0;

              .shortcut-keys {
                kbd {
                  font-size: 10px;
                  padding: 3px 6px;
                  min-width: 18px;
                }

                span {
                  font-size: 9px;
                }
              }

              .shortcut-desc {
                font-size: 12px;
              }
            }
          }
        }
      }

      .panel-footer {
        padding: 16px 24px;
        flex-direction: column;
        gap: 16px;
        align-items: stretch;

        .tip-text {
          justify-content: center;
          font-size: 12px;
        }

        :deep(.el-button) {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .shortcuts-panel-overlay {
    .shortcuts-panel {
      .panel-header {
        padding: 16px 20px;

        h3 {
          font-size: 16px;
        }
      }

      .shortcuts-content {
        padding: 20px;
        gap: 20px;

        .shortcuts-group {
          .shortcut-list {
            .shortcut-item {
              flex-direction: column;
              align-items: flex-start;
              gap: 8px;
              padding: 12px 8px;

              .shortcut-keys {
                align-self: center;
              }

              .shortcut-desc {
                text-align: center;
                font-size: 11px;
              }
            }
          }
        }
      }

      .panel-footer {
        padding: 12px 20px;

        .tip-text {
          font-size: 11px;
        }
      }
    }
  }
}
</style>
